<template>
	<view class="page-container" :class="{ 'sidebar-open': isSidebarOpen }">
		<!-- 遮罩层 -->
		<view class="sidebar-mask" @click="toggleSidebar"></view>
		
		<!-- 侧边栏 -->
		<view class="sidebar">
			<view class="sidebar-header">
				<text class="sidebar-title">会话列表</text>
			</view>
			<scroll-view class="chat-history" scroll-y="true" v-if="isSidebarOpen">
				<view v-for="(chat, index) in chatHistory" 
					:key="index" 
					:class="['history-item', { active: currentChatId === chat.id }]"
					@click="switchChat(chat.id)"
				>
					<view class="history-content">
						<text class="history-title">{{ chat.title }}</text>
						<text class="history-time">{{ chat.time }}</text>
					</view>
				</view>
			</scroll-view>

			<!-- 个人信息区域 -->
			<view class="user-profile" @click="openUserPanel">
				<view class="profile-avatar">
					<image src="/static/default-avatar.png" mode="aspectFill" />
				</view>
				<view class="profile-info">
					<text class="profile-name">用户名</text>
					<text class="profile-desc">查看个人信息</text>
				</view>
				<view class="profile-arrow">
					<text class="arrow-icon">›</text>
				</view>
			</view>
		</view>

		<!-- 主聊天区域 -->
		<view class="chat-container">
			<!-- 顶部控制栏 -->
			<view class="top-controls">
				<view class="left-controls">
					<button class="toggle-btn" hover-class="none" @click="toggleSidebar">
						<view class="toggle-icon">
							<view class="toggle-line"></view>
							<view class="toggle-line"></view>
							<view class="toggle-line"></view>
						</view>
					</button>
				</view>
			</view>

			<!-- 新建会话按钮 -->
			<button class="new-chat-btn" hover-class="none" @click="createNewChat">
				<text class="plus-icon">+</text>
			</button>

			<!-- 主内容区域 -->
			<view class="main-content">
				<scroll-view 
					class="messages-container" 
					scroll-y="true" 
					:scroll-top="scrollTop"
					:scroll-with-animation="true"
					@scrolltoupper="loadMoreMessages"
				>
					<!-- 欢迎语和快速提问标签 - 仅在新会话且没有消息时显示 -->
					<view v-if="currentChat.messages.length === 0" class="welcome-section">
						<view class="welcome-header">
							<image class="welcome-avatar" src="/static/ai-avatar.png" mode="aspectFill" />
							<text class="welcome-title">你好！我是华谋AI助手 👋</text>
						</view>
						<text class="welcome-desc">我可以帮你解答问题、编写代码、分析数据等。以下是一些你可能感兴趣的话题：</text>
						<view class="quick-questions">
							<view 
								v-for="(question, index) in quickQuestions" 
								:key="index"
								class="question-tag"
								@click="handleQuickQuestion(question)"
							>
								{{ question }}
							</view>
						</view>
					</view>

					<!-- 现有的消息列表 -->
					<view v-for="(message, index) in currentChat.messages" 
						:key="index" 
						:class="['message-item', message.role === 'user' ? 'message-user' : 'message-ai']"
					>
						<!-- 用户消息 -->
						<view v-if="message.role === 'user'" class="message-content user-content">
							{{ message.content }}
						</view>

						<!-- AI 消息 -->
						<view v-else class="ai-message">
							<view class="message-header">
								<view class="message-avatar">
									<image src="/static/ai-avatar.png" mode="aspectFill" />
								</view>
								<text class="ai-name">华谋AI副驾</text>
							</view>
							<view class="message-content ai-content">
								<view v-html="formatMarkdown(message.content)"></view>
							</view>
							<!-- 消息操作按钮 - 仅在消息完整加载后显示 -->
							<view v-if="!isReceiving || message.isComplete" class="message-actions">
								<view class="action-btn" @click="copyMessage(message.content)">
									<text class="action-icon">📋</text>
								</view>
								<view class="action-btn" @click="toggleLike(index)">
									<text class="action-icon" :class="{ 'active': message.isLiked }">👍</text>
								</view>
								<view class="action-btn" @click="toggleDislike(index)">
									<text class="action-icon" :class="{ 'active': message.isDisliked }">👎</text>
								</view>
							</view>
						</view>
					</view>
					<!-- AI 思考状态 -->
					<view v-if="isReceiving && !currentMessageContent" class="message-item message-ai">
						<view class="ai-message">
							<view class="message-header">
								<view class="message-avatar">
									<image src="/static/ai-avatar.png" mode="aspectFill" />
								</view>
								<text class="ai-name">华谋AI副驾</text>
							</view>
							<view class="thinking-dots">
								<view class="dot"></view>
								<view class="dot"></view>
								<view class="dot"></view>
							</view>
						</view>
					</view>
				</scroll-view>

				<view class="input-container">
					<!-- 输入框区域 -->
					<view class="input-area">
						<textarea
							v-model="userInput"
							class="input-box"
							placeholder="请输入消息..."
							:adjust-position="false"
							:cursor-spacing="20"
							@keypress.enter.prevent="sendMessage"
							auto-height
							:maxlength="-1"
						/>
					</view>

					<!-- 功能按钮区 -->
					<view class="function-bar">
						<view class="left-buttons">
							<button 
								class="function-btn" 
								:class="{ 'function-btn-active': isDeepThinkingActive }"
								hover-class="none"
								@click="toggleDeepThinking"
							>
								<image src="/static/deep_thinking.png" mode="aspectFit" />
								<text>深度思考</text>
							</button>
							<button 
								class="function-btn"
								:class="{ 'function-btn-active': isWebSearchActive }"
								hover-class="none"
								@click="toggleWebSearch"
							>
								<image src="/static/web_search.png" mode="aspectFit" />
								<text>联网搜索</text>
							</button>
							<button 
								class="function-btn"
								hover-class="none"
								@click="handleUploadClick"
							>
								<image src="/static/upload.png" mode="aspectFit" />
								<text>上传文件</text>
							</button>
						</view>
						<button 
							class="send-btn" 
							@click="sendMessage" 
							:disabled="!userInput.trim()"
							hover-class="none"
						>
							<image class="send-icon" src="/static/send_msg.png" mode="aspectFit" />
						</button>
					</view>
				</view>
			</view>
		</view>

		<!-- 用户信息弹出面板 -->
		<transition name="mask">
			<view class="user-panel-mask" v-if="showUserPanel" @click="closeUserPanel">
				<transition name="panel">
					<view class="user-panel" @click.stop v-if="showUserPanel">
						<!-- 用户基本信息 -->
						<view class="panel-header">
							<view class="user-info">
								<image class="user-avatar" src="/static/default-avatar.png" mode="aspectFill" />
								<view class="user-details">
									<text class="user-name">藏在贝壳里的海</text>
									<!-- <text class="user-id"></text> -->
								</view>
							</view>
						</view>

						<!-- 功能列表 -->
						<view class="panel-content">
							<view class="menu-list">
								<transition-group name="list">
									<view class="menu-item" key="contact" @click="handleContact">
										<text class="menu-icon">📞</text>
										<text class="menu-text">联系客服</text>
										<text class="menu-arrow">›</text>
									</view>
									<view class="menu-item" key="privacy" @click="handlePrivacy">
										<text class="menu-icon">🔒</text>
										<text class="menu-text">隐私条款</text>
										<text class="menu-arrow">›</text>
									</view>
									<view class="menu-item" key="terms" @click="handleTerms">
										<text class="menu-icon">📜</text>
										<text class="menu-text">用户服务协议</text>
										<text class="menu-arrow">›</text>
									</view>
									<view class="menu-item" key="about" @click="handleAbout">
										<text class="menu-icon">ℹ️</text>
										<text class="menu-text">关于我们</text>
										<text class="menu-arrow">›</text>
									</view>
								</transition-group>
							</view>
						</view>

						<!-- 退出按钮 -->
						<view class="panel-footer">
							<button class="logout-btn" @click="handleLogout">退出当前账号</button>
						</view>
					</view>
				</transition>
			</view>
		</transition>

		<!-- 联系客服弹窗 -->
		<transition name="slide-fade">
			<view class="popup-mask" v-if="showContact" @click.stop="closeContact">
				<view class="popup-card" @click.stop>
					<view class="qr-section">
						<image class="qr-code" src="/static/contact-qr.png" mode="aspectFit" />
						<text class="qr-tip">扫描二维码添加客服微信</text>
					</view>
					<view class="contact-info">
						<text class="info-title">工作时间</text>
						<text class="info-text">周一至周五 9:00-18:00</text>
						<text class="info-title">联系邮箱</text>
						<text class="info-text">yichen015@163.com</text>
					</view>
				</view>
			</view>
		</transition>

		<!-- 隐私政策弹窗 -->
		<transition name="slide-fade">
			<view class="popup-mask" v-if="showPrivacy" @click.stop="closePrivacy">
				<view class="popup-card policy-card" @click.stop>
					<text class="popup-title">隐私政策</text>
					<text class="update-time">更新时间：2024年1月1日</text>
					<scroll-view class="popup-content" scroll-y>
						<text class="paragraph">我们非常重视您的隐私保护，并严格遵守相关法律法规。本隐私政策将帮助您了解：</text>
						<text class="subtitle">1. 我们如何收集和使用您的信息</text>
						<text class="paragraph">• 当您使用我们的服务时，我们会收集必要的信息以提供服务\n• 我们会对您的聊天内容进行加密处理\n• 我们不会将您的个人信息用于其他商业用途</text>
						<text class="subtitle">2. 信息安全</text>
						<text class="paragraph">• 采用业界领先的安全技术保护您的信息\n• 定期进行安全评估和升级\n• 严格控制数据访问权限</text>
					</scroll-view>
				</view>
			</view>
		</transition>

		<!-- 用户服务协议弹窗 -->
		<transition name="slide-fade">
			<view class="popup-mask" v-if="showTerms" @click.stop="closeTerms">
				<view class="popup-card policy-card" @click.stop>
					<text class="popup-title">用户服务协议</text>
					<text class="update-time">更新时间：2024年1月1日</text>
					<scroll-view class="popup-content" scroll-y>
						<text class="paragraph">欢迎使用我们的服务。请仔细阅读以下条款：</text>
						<text class="subtitle">1. 服务说明</text>
						<text class="paragraph">• 我们提供AI对话及相关服务\n• 服务内容可能随时更新调整\n• 我们保留修改服务内容的权利</text>
						<text class="subtitle">2. 用户责任</text>
						<text class="paragraph">• 遵守相关法律法规\n• 不得滥用我们的服务\n• 保护账号安全</text>
					</scroll-view>
				</view>
			</view>
		</transition>

		<!-- 关于我们弹窗 -->
		<transition name="slide-fade">
			<view class="popup-mask" v-if="showAbout" @click.stop="closeAbout">
				<view class="popup-card about-card" @click.stop>
					<view class="logo-section">
						<image class="logo" src="/static/logo.png" mode="aspectFit" />
						<text class="app-name">华谋AI助手</text>
						<text class="version">Version 1.0.0</text>
					</view>
					<view class="about-content">
						<text class="section-title">关于我们</text>
						<text class="description">华谋AI助手是一款智能对话助手，致力于为用户提供高质量的AI对话服务。我们运用先进的人工智能技术，为用户提供智能、便捷、安全的对话体验。</text>
						<text class="section-title">主要特点</text>
						<view class="feature-list">
							<view class="feature-item">
								<text class="feature-icon">🚀</text>
								<text class="feature-name">智能对话</text>
							</view>
							<view class="feature-item">
								<text class="feature-icon">🔒</text>
								<text class="feature-name">安全可靠</text>
							</view>
							<view class="feature-item">
								<text class="feature-icon">⚡</text>
								<text class="feature-name">快速响应</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</transition>
	</view>
</template>

<script>
import { streamChat } from '@/utils/chat.js';

export default {
	data() {
		return {
			isSidebarOpen: false,
			userInput: '',
			currentChatId: 1,
			chatHistory: [
				{
					id: 1,
					title: '默认会话',
					time: '刚刚',
					messages: []
				}
			],
			isDeepThinkingActive: false,
			isWebSearchActive: false,
			isUploadActive: false,
			currentMessageContent: '',
			isReceiving: false,
			showUserPanel: false,
			showContact: false,
			showPrivacy: false,
			showTerms: false,
			showAbout: false,
			quickQuestions: [
				"介绍一下你自己",
				"你能帮我做什么",
				"写一个简单的计数器代码",
				"如何优化网站性能",
				"帮我分析一下数据",
				"写一篇工作周报"
			]
		};
	},
	computed: {
		currentChat() {
			return this.chatHistory.find(chat => chat.id === this.currentChatId) || this.chatHistory[0];
		}
	},
	methods: {
		toggleSidebar() {
			this.isSidebarOpen = !this.isSidebarOpen;
		},
		createNewChat() {
			const newChat = {
				id: Date.now(),
				title: `新会话 ${this.chatHistory.length + 1}`,
				time: '刚刚',
				messages: []
			};
			this.chatHistory.unshift(newChat);
			this.currentChatId = newChat.id;
		},
		switchChat(chatId) {
			this.currentChatId = chatId;
		},
		async sendMessage() {
			if (!this.userInput.trim() || this.isReceiving) return;
			
			const question = this.userInput.trim();
			this.userInput = '';
			
			// 添加用户消息
			const currentChat = this.chatHistory.find(chat => chat.id === this.currentChatId);
			currentChat.messages.push({
				role: 'user',
				content: question
			});

			this.isReceiving = true;
			this.currentMessageContent = '';
			
			try {
				const stream = await streamChat(question, currentChat.messages);
				
				// 添加AI消息占位（移到这里，在获取到流之后再添加）
				currentChat.messages.push({
					role: 'assistant',
					content: this.currentMessageContent
				});

				for await (const chunk of stream.iterateResponse()) {
					this.currentMessageContent += chunk;
					// 更新最后一条消息的内容
					currentChat.messages[currentChat.messages.length - 1].content = this.currentMessageContent;
					// 滚动到底部
					this.$nextTick(() => {
						this.scrollToBottom();
					});
				}
			} catch (error) {
				console.error('Send message error:', error);
				// 处理错误情况
				if (currentChat.messages[currentChat.messages.length - 1]?.role === 'assistant') {
					currentChat.messages[currentChat.messages.length - 1].content = '抱歉，发生了错误，请稍后重试。';
				}
			} finally {
				this.isReceiving = false;
			}
		},
		toggleDeepThinking() {
			this.isDeepThinkingActive = !this.isDeepThinkingActive;
		},
		toggleWebSearch() {
			this.isWebSearchActive = !this.isWebSearchActive;
		},
		handleUploadClick() {
			uni.showToast({
				title: '功能暂未开放',
				icon: 'none',
				duration: 2000
			});
		},
		loadMoreMessages() {
			// Implementation of loadMoreMessages method
		},
		scrollToBottom() {
			// Implementation of scrollToBottom method
		},
		formatMarkdown(content) {
			if (!content) return '';
			
			try {
				// 处理代码块
				content = content.replace(/```(\w+)?\n?([\s\S]*?)```/g, (match, lang, code) => {
					return `<pre class="code-block${lang ? ' language-' + lang : ''}"><code>${code.trim()}</code></pre>`;
				});
				
				// 处理内联代码
				content = content.replace(/`([^`]+)`/g, '<code>$1</code>');
				
				// 处理标题
				content = content.replace(/^(#{1,6})\s+(.+)$/gm, (match, hashes, text) => {
					const level = hashes.length;
					return `<h${level}>${text}</h${level}>`;
				});
				
				// 处理粗体
				content = content.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
				
				// 处理斜体
				content = content.replace(/\*(.*?)\*/g, '<em>$1</em>');
				
				// 处理列表
				content = content.replace(/^-\s+(.+)$/gm, '<li>$1</li>');
				content = content.replace(/(<li>.*<\/li>)/s, '<ul>$1</ul>');
				
				// 处理有序列表
				content = content.replace(/^\d+\.\s+(.+)$/gm, '<li>$1</li>');
				content = content.replace(/(<li>.*<\/li>)/s, '<ol>$1</ol>');
				
				// 处理引用
				content = content.replace(/^>\s+(.+)$/gm, '<blockquote>$1</blockquote>');
				
				// 处理链接
				content = content.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2">$1</a>');
				
				// 处理换行
				content = content.replace(/\n\n/g, '</p><p>');
				content = content.replace(/\n/g, '<br>');
				content = `<p>${content}</p>`;
				
				return content;
			} catch (e) {
				console.error('Markdown parse error:', e);
				return content;
			}
		},
		copyMessage(content) {
			// 创建临时 div 来解析 HTML 并获取纯文本
			const tempDiv = document.createElement('div');
			tempDiv.innerHTML = content;
			const plainText = tempDiv.textContent || tempDiv.innerText || '';
			
			uni.setClipboardData({
				data: plainText,
				success: () => {
					uni.showToast({
						title: '复制成功',
						icon: 'none'
					});
				}
			});
		},
		toggleLike(index) {
			const message = this.currentChat.messages[index];
			if (message.isDisliked) {
				message.isDisliked = false;
			}
			message.isLiked = !message.isLiked;
		},
		toggleDislike(index) {
			const message = this.currentChat.messages[index];
			if (message.isLiked) {
				message.isLiked = false;
			}
			message.isDisliked = !message.isDisliked;
		},
		openUserPanel() {
			this.showUserPanel = true;
		},
		closeUserPanel() {
			this.showUserPanel = false;
		},
		handleContact() {
			this.showContact = true;
		},
		closeContact(e) {
			e.stopPropagation();
			this.showContact = false;
		},
		handlePrivacy() {
			this.showPrivacy = true;
		},
		closePrivacy(e) {
			e.stopPropagation();
			this.showPrivacy = false;
		},
		handleTerms() {
			this.showTerms = true;
		},
		closeTerms(e) {
			e.stopPropagation();
			this.showTerms = false;
		},
		handleAbout() {
			this.showAbout = true;
		},
		closeAbout(e) {
			e.stopPropagation();
			this.showAbout = false;
		},
		handleLogout() {
			// 实现退出登录逻辑
			uni.showModal({
				title: '提示',
				content: '确定要退出当前账号吗？',
				success: (res) => {
					if (res.confirm) {
						// 执行退出操作
					}
				}
			});
		},
		// 在消息接收完成时设置标记
		async handleStreamResponse(response) {
			let message = '';
			for await (const chunk of response.iterateResponse()) {
				message += chunk;
				// 更新当前消息
				if (this.currentChat.messages.length > 0) {
					const lastMessage = this.currentChat.messages[this.currentChat.messages.length - 1];
					lastMessage.content = message;
					// 强制更新视图
					this.$forceUpdate();
				}
			}
			// 标记消息已完成
			if (this.currentChat.messages.length > 0) {
				const lastMessage = this.currentChat.messages[this.currentChat.messages.length - 1];
				lastMessage.isComplete = true;
				// 强制更新视图
				this.$forceUpdate();
			}
		},
		handleQuickQuestion(question) {
			this.userInput = question;
			this.sendMessage();
		}
	}
};
</script>

<style>
/* 页面容器 */
.page-container {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #fff;
}

/* 聊天容器 */
.chat-container {
	position: relative;
	width: 100%;
	height: 100%;
	transition: transform 0.3s ease;
	padding-top: 88rpx; /* 为顶部控制栏留出空间 */
}

/* 侧边栏展开时的位移 */
.sidebar-open .chat-container {
	transform: translateX(480rpx);
}

/* 侧边栏 */
.sidebar {
	position: fixed;
	left: 0;
	top: 0;
	bottom: 0;
	width: 480rpx;
	display: flex;
	flex-direction: column;
	background-color: #f8f9fa;
	border-right: 1px solid rgba(0, 0, 0, 0.06);
	transform: translateX(-100%);
	transition: transform 0.3s ease;
	z-index: 100;
}

/* 侧边栏展开状态 */
.sidebar-open .sidebar {
	transform: translateX(0);
}

/* 顶部控制栏 */
.top-controls {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 88rpx;
	background-color: #fff;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	display: flex;
	align-items: center;
	padding: 0 24rpx;
	z-index: 99;
}

/* 切换按钮 */
.toggle-btn {
	width: 48rpx;
	height: 48rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	padding: 0;
	margin: 0;
}

.toggle-btn::after {
	border: none;
}

/* 切换图标 */
.toggle-icon {
	width: 32rpx;
	height: 32rpx;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 6rpx;
}

.toggle-line {
	width: 100%;
	height: 2px;
	background-color: #333;
	transition: all 0.3s ease;
}

/* 遮罩层 */
.sidebar-mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.3);
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
	z-index: 99;
}

/* 遮罩层显示状态 */
.sidebar-open .sidebar-mask {
	opacity: 1;
	visibility: visible;
}

/* 主内容区域 */
.main-content {
	flex: 1;
	height: calc(100vh - 88rpx); /* 减去顶部控制栏的高度 */
	position: relative;
	overflow: hidden;
}

.sidebar-header {
	padding: 24rpx;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	background-color: rgba(255, 255, 255, 0.98);
}

.chat-history {
	flex: 1;
	overflow-y: auto;
	padding: 12rpx 0;
	/* 为个人信息区域预留空间 */
	padding-bottom: 120rpx;
}

.history-item {
	padding: 24rpx;
	margin: 0 12rpx 8rpx;
	border-radius: 12rpx;
	cursor: pointer;
	transition: all 0.3s ease;
}

.history-item:active {
	background-color: #f5f7fa;
}

.history-item.active {
	background-color: #e8f2ff;
}

.history-content {
	display: flex;
	flex-direction: column;
	gap: 4rpx;
}

.history-title {
	font-size: 28rpx;
	color: #333;
	line-height: 1.4;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.history-time {
	font-size: 20rpx;
	color: #999;
	margin-top: 4rpx;
}

.sidebar-title {
	font-size: 28rpx;
	color: #333;
	font-weight: 500;
}

.messages-container {
	height: 100%;
	padding: 24rpx;
	padding-bottom: 180rpx; /* 为输入框预留空间 */
	box-sizing: border-box;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch; /* 提升 iOS 滚动体验 */
}

.input-container {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: rgba(255, 255, 255, 0.98);
	border-top: 1px solid rgba(0, 0, 0, 0.06);
	padding: 12rpx 24rpx;
	backdrop-filter: blur(10px);
}

/* 输入区域样式优化 */
.input-area {
	margin-bottom: 12rpx;
}

.input-box {
	width: 100%;
	min-height: 64rpx;
	max-height: 160rpx;
	padding: 16rpx 24rpx;
	font-size: 28rpx;
	line-height: 40rpx;
	background-color: #f5f7fa;
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 12rpx;
	box-sizing: border-box;
	transition: all 0.3s ease;
}

.input-box:focus {
	background-color: #fff;
	border-color: rgba(0, 122, 255, 0.3);
	box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.1);
}

.input-box::placeholder {
	color: #bbb;
	font-size: 28rpx;
}

/* 功能按钮区样式优化 */
.function-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 4rpx 0;
}

.left-buttons {
	display: flex;
	gap: 12rpx;
}

.function-btn {
	height: 44rpx;
	padding: 0 20rpx;
	background-color: transparent;
	border: none;
	display: flex;
	align-items: center;
	gap: 8rpx;
	font-size: 22rpx;
	color: #666;
	transition: all 0.3s ease;
	border-radius: 22rpx;
}

.function-btn-active {
	color: #007AFF;
	background-color: rgba(0, 122, 255, 0.08);
}

.function-btn-active image {
	opacity: 1;
}

.function-btn::after {
	border: none;
}

.function-btn image {
	width: 28rpx;
	height: 28rpx;
	opacity: 0.7;
	transition: all 0.3s ease;
}

.function-btn:active {
	transform: scale(0.98);
	opacity: 0.8;
}

/* 发送按钮样式 */
.send-btn {
	width: 56rpx;
	height: 44rpx;
	padding: 0;
	margin: 0;
	background: transparent;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
}

.send-btn::after {
	border: none;
}

.send-btn:active {
	transform: scale(0.95);
	opacity: 0.7;
}

.send-btn:disabled {
	opacity: 0.3;
}

.send-icon {
	width: 32rpx;
	height: 32rpx;
}

/* 消息项基础样式 */
.message-item {
	margin-bottom: 16rpx;
	padding: 0 12rpx;
}

/* 用户消息样式 */
.message-user {
	display: flex;
	justify-content: flex-end;
}

.user-content {
	background-color: #007AFF;
	color: #fff;
	border-radius: 12rpx;
	border-top-right-radius: 4rpx;
	padding: 20rpx;
	font-size: 28rpx;
	line-height: 1.5;
	display: inline-block;
	word-wrap: break-word;
	max-width: 70%;
}

/* AI 消息样式 */
.ai-message {
	display: flex;
	flex-direction: column;
	gap: 8rpx;
}

.message-header {
	display: flex;
	align-items: center;
	gap: 12rpx;
}

.message-avatar {
	width: 40rpx;
	height: 40rpx;
	border-radius: 50%;
	overflow: hidden;
}

.message-avatar image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ai-name {
	font-size: 28rpx;
	color: #333;
	font-weight: 500;
}

.ai-content {
	margin-left: 52rpx;
	background-color: #f5f7fa;
	color: #333;
	border-radius: 12rpx;
	border-top-left-radius: 4rpx;
	padding: 20rpx;
	font-size: 28rpx;
	line-height: 1.5;
	max-width: 90%; /* 限制最大宽度 */
	overflow-x: auto; /* 允许代码块横向滚动 */
}

/* 操作栏样式 */
.message-actions {
	margin-left: 52rpx;
	display: flex;
	gap: 12rpx;
	padding: 8rpx 0;
}

/* 操作按钮样式 */
.action-btn {
	padding: 4rpx 8rpx;
	border-radius: 4rpx;
}

.action-icon {
	font-size: 24rpx;
	opacity: 0.6;
}

.action-icon.active {
	opacity: 1;
	color: #007AFF;
}

/* 思考状态样式 */
.thinking-dots {
	margin-left: 52rpx;
	display: flex;
	align-items: center;
	gap: 8rpx;
	padding: 20rpx;
	background-color: #f5f7fa;
	border-radius: 12rpx;
	border-top-left-radius: 4rpx;
	width: fit-content;
}

.dot {
	width: 8rpx;
	height: 8rpx;
	background-color: #666;
	border-radius: 50%;
	animation: thinking 1.4s infinite;
	opacity: 0.3;
}

.dot:nth-child(2) {
	animation-delay: 0.2s;
}

.dot:nth-child(3) {
	animation-delay: 0.4s;
}

@keyframes thinking {
	0%, 100% {
		transform: translateY(0);
		opacity: 0.3;
	}
	50% {
		transform: translateY(-4rpx);
		opacity: 1;
	}
}

/* 个人信息区域样式 */
.user-profile {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 120rpx; /* 固定高度 */
	display: flex;
	align-items: center;
	padding: 24rpx;
	background-color: #fff;
	border-top: 1px solid rgba(0, 0, 0, 0.06);
	box-sizing: border-box;
	z-index: 1; /* 确保在上层 */
}

.profile-avatar {
	width: 72rpx;
	height: 72rpx;
	border-radius: 50%;
	overflow: hidden;
	background-color: #f0f2f5;
}

.profile-avatar image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.profile-info {
	flex: 1;
	margin-left: 16rpx;
	display: flex;
	flex-direction: column;
}

.profile-name {
	font-size: 28rpx;
	color: #333;
	font-weight: 500;
}

.profile-desc {
	font-size: 24rpx;
	color: #999;
	margin-top: 4rpx;
}

.profile-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40rpx;
	height: 40rpx;
}

.arrow-icon {
	font-size: 32rpx;
	color: #999;
	transform: scale(1.2);
}

/* 点击效果 */
.user-profile:active {
	background-color: #f5f7fa;
}

/* 新建会话按钮 */
.new-chat-btn {
	position: fixed;
	top: 22rpx; /* (88rpx - 44rpx) / 2 = 22rpx，垂直居中 */
	right: 24rpx;
	width: 44rpx;
	height: 44rpx;
	padding: 0;
	background: transparent;
	border: 1.5px solid #666;
	border-radius: 22rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	z-index: 101; /* 确保在最上层 */
}

.new-chat-btn::after {
	border: none;
}

.plus-icon {
	font-size: 28rpx;
	color: #666;
	font-weight: 300;
	line-height: 1;
	margin-top: -2rpx;
}

.new-chat-btn:active {
	background-color: #f5f5f5;
	border-color: #999;
}

/* 消息内容 */
.message-content {
	word-break: break-word; /* 确保长文本正确换行 */
	white-space: pre-wrap; /* 保留换行和空格 */
}

/* 代码块样式 */
.ai-content >>> pre {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* Markdown 样式 */
.ai-content {
	font-size: 28rpx;
	line-height: 1.6;
}

.ai-content >>> h1,
.ai-content >>> h2,
.ai-content >>> h3 {
	margin: 16rpx 0;
	font-weight: 600;
}

.ai-content >>> p {
	margin: 12rpx 0;
}

.ai-content >>> pre {
	background-color: #f6f8fa;
	border-radius: 6rpx;
	padding: 16rpx;
	margin: 12rpx 0;
	overflow-x: auto;
}

.ai-content >>> code {
	font-family: Consolas, Monaco, 'Andale Mono', monospace;
	font-size: 24rpx;
	padding: 4rpx 8rpx;
	border-radius: 4rpx;
	background-color: rgba(0, 0, 0, 0.05);
}

.ai-content >>> pre code {
	padding: 0;
	background: none;
}

.ai-content >>> ul,
.ai-content >>> ol {
	padding-left: 24rpx;
	margin: 8rpx 0;
}

.ai-content >>> li {
	margin: 4rpx 0;
}

.ai-content >>> blockquote {
	border-left: 4rpx solid #dfe2e5;
	padding-left: 16rpx;
	margin: 8rpx 0;
	color: #666;
}

/* 消息操作按钮 */
.message-actions {
	margin-top: 12rpx;
	margin-left: 52rpx;
	display: flex;
	gap: 12rpx;
	opacity: 1;
	transition: opacity 0.3s ease;
}

.action-btn {
	padding: 8rpx;
	border-radius: 4rpx;
	cursor: pointer;
}

.action-btn:active {
	background-color: rgba(0, 0, 0, 0.05);
}

.action-icon {
	font-size: 28rpx;
	opacity: 0.6;
}

.action-icon.active {
	opacity: 1;
	color: #007AFF;
}

/* 遮罩层动画 */
.mask-enter-active,
.mask-leave-active {
	transition: opacity 0.3s ease;
}

.mask-enter-from,
.mask-leave-to {
	opacity: 0;
}

/* 面板动画 */
.panel-enter-active,
.panel-leave-active {
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.panel-enter-from,
.panel-leave-to {
	transform: translateY(100%);
	opacity: 0;
}

/* 列表项动画 */
.list-enter-active,
.list-leave-active {
	transition: all 0.3s ease;
}

.list-enter-from {
	opacity: 0;
	transform: translateY(30px);
}

.list-leave-to {
	opacity: 0;
	transform: translateY(-30px);
}

/* 遮罩层样式 */
.user-panel-mask {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.4);
	z-index: 999;
}

/* 面板样式 */
.user-panel {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #fff;
	border-radius: 24rpx 24rpx 0 0;
	z-index: 1000;
	box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.1);
}

/* 其他样式保持不变... */
.panel-header {
	padding: 32rpx;
	border-bottom: 1px solid #f5f5f5;
}

.user-info {
	display: flex;
	align-items: center;
	gap: 20rpx;
}

.user-avatar {
	width: 120rpx;
	height: 120rpx;
	border-radius: 60rpx;
	background-color: #f0f2f5;
}

.user-details {
	flex: 1;
}

.user-name {
	font-size: 32rpx;
	font-weight: 500;
	color: #333;
	margin-bottom: 8rpx;
}

.user-id {
	font-size: 24rpx;
	color: #999;
}

.menu-list {
	padding: 20rpx 32rpx;
}

.menu-item {
	display: flex;
	align-items: center;
	height: 100rpx;
	padding: 0 16rpx;
	border-radius: 12rpx;
	margin-bottom: 8rpx;
}

.menu-item:active {
	background-color: #f5f5f5;
}

.menu-icon {
	font-size: 36rpx;
	margin-right: 20rpx;
}

.menu-text {
	flex: 1;
	font-size: 28rpx;
	color: #333;
}

.menu-arrow {
	font-size: 32rpx;
	color: #999;
}

.panel-footer {
	padding: 32rpx;
	border-top: 1px solid #f5f5f5;
}

.logout-btn {
	width: 100%;
	height: 88rpx;
	line-height: 88rpx;
	text-align: center;
	background-color: #f5f5f5;
	color: #ff4d4f;
	font-size: 28rpx;
	border-radius: 44rpx;
	border: none;
}

.logout-btn:active {
	opacity: 0.8;
}

/* 通用弹窗样式 */
.popup-mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.6);
	z-index: 1001;
	display: flex;
	align-items: center;
	justify-content: center;
	backdrop-filter: blur(4px);
}

.popup-card {
	background-color: #fff;
	border-radius: 24rpx;
	padding: 40rpx;
	width: 85%;
	max-width: 650rpx;
	max-height: 85vh;
	box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
	position: relative;
	overflow: hidden;
}

/* 联系客服样式 */
.qr-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 20rpx 0 50rpx;
}

.qr-code {
	width: 360rpx;
	height: 360rpx;
	margin-bottom: 24rpx;
	border-radius: 12rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
}

.qr-tip {
	font-size: 28rpx;
	color: #666;
	text-align: center;
	line-height: 1.5;
}

.contact-info {
	border-top: 1px solid #f0f0f0;
	padding-top: 30rpx;
	margin: 0 20rpx;
}

.info-title {
	font-size: 28rpx;
	color: #333;
	font-weight: 500;
	margin: 20rpx 0 8rpx;
	display: block;
}

.info-text {
	font-size: 26rpx;
	color: #666;
	margin-bottom: 20rpx;
	display: block;
	line-height: 1.5;
}

/* 政策类弹窗样式 */
.policy-card {
	padding: 40rpx 30rpx;
}

.popup-title {
	font-size: 36rpx;
	font-weight: 600;
	color: #333;
	margin-bottom: 12rpx;
	display: block;
	text-align: center;
}

.update-time {
	font-size: 24rpx;
	color: #999;
	margin-bottom: 30rpx;
	display: block;
	text-align: center;
}

.popup-content {
	max-height: 60vh;
	padding: 0 20rpx;
}

.popup-content::-webkit-scrollbar {
	width: 6rpx;
}

.popup-content::-webkit-scrollbar-thumb {
	background-color: #ddd;
	border-radius: 3rpx;
}

.subtitle {
	font-size: 30rpx;
	font-weight: 500;
	color: #333;
	margin: 30rpx 0 16rpx;
	display: block;
}

.paragraph {
	font-size: 28rpx;
	color: #666;
	line-height: 1.8;
	margin-bottom: 20rpx;
	display: block;
	text-align: justify;
}

/* 关于我们弹窗样式 */
.about-card {
	padding: 50rpx 40rpx;
}

.about-card .logo-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 50rpx;
}

.about-card .logo {
	width: 140rpx;
	height: 140rpx;
	margin-bottom: 20rpx;
	border-radius: 28rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
}

.about-card .app-name {
	font-size: 34rpx;
	font-weight: 600;
	color: #333;
	margin-bottom: 8rpx;
}

.about-card .version {
	font-size: 24rpx;
	color: #999;
}

.about-content {
	padding: 0 20rpx;
}

.section-title {
	font-size: 32rpx;
	font-weight: 500;
	color: #333;
	margin: 30rpx 0 16rpx;
	display: block;
}

.description {
	font-size: 28rpx;
	color: #666;
	line-height: 1.8;
	text-align: justify;
}

.feature-list {
	display: flex;
	justify-content: space-around;
	margin-top: 40rpx;
	padding: 20rpx 0;
}

.feature-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1;
}

.feature-icon {
	font-size: 52rpx;
	margin-bottom: 12rpx;
}

.feature-name {
	font-size: 26rpx;
	color: #666;
	font-weight: 500;
}

/* 弹出动画 */
.slide-fade-enter-active,
.slide-fade-leave-active {
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
	opacity: 0;
	transform: scale(0.95);
}

/* 欢迎语部分样式 */
.welcome-section {
	padding: 32rpx;
	background-color: #f5f7fa;
	border-radius: 16rpx;
	margin-bottom: 32rpx;
}

.welcome-header {
	display: flex;
	align-items: center;
	gap: 16rpx;
	margin-bottom: 16rpx;
}

.welcome-avatar {
	width: 48rpx;
	height: 48rpx;
	border-radius: 50%;
}

.welcome-title {
	font-size: 32rpx;
	font-weight: 600;
	color: #333;
}

.welcome-desc {
	font-size: 28rpx;
	color: #666;
	line-height: 1.5;
	margin-bottom: 24rpx;
	display: block;
}

/* 快速提问标签样式 */
.quick-questions {
	display: flex;
	flex-wrap: wrap;
	gap: 16rpx;
}

.question-tag {
	padding: 12rpx 24rpx;
	background-color: #fff;
	border: 1px solid rgba(0, 122, 255, 0.3);
	border-radius: 32rpx;
	font-size: 26rpx;
	color: #007AFF;
	transition: all 0.3s ease;
}

.question-tag:active {
	background-color: rgba(0, 122, 255, 0.1);
	transform: scale(0.98);
}
</style>